/* ============================================================================ Rent La Ventana — design tokens ---------------------------------------------------------------------------- Single source of truth. Every component imports this file. Brand: Rent La Ventana (Diana Salom, BCS, Mexico) Voice: considered, warm, locally-grounded. Theme: light mode only. Off-white canvas. Color is for moments. Type: Obvia Narrow (display) + Poppins (body). Stand-in: Bricolage Grotesque for Obvia until license is purchased. ========================================================================= */ /* ----- Fonts --------------------------------------------------------------- Display = Fraunces (Google Fonts). Variable serif with a SOFT axis and genuinely beautiful italics — carries the editorial, considered tone the brand is going for, without leaning Cabo-glamour. Body = Poppins (Google Fonts). ------------------------------------------------------------------------- */ @import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT@0,9..144,300..700,30;1,9..144,300..700,30&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap"); :root { /* ==================================================================== COLOR — six brand swatches. Used sparingly. Body text stays near-black. Teal Blue + Lyons Blue do structural work. The warm accents (Daylily, Marmalade, Snapdragon, Vanilla Custard) appear in moments. ==================================================================== */ --rlv-teal: #007F7B; /* Teal Blue — primary action, structural */ --rlv-lyons: #015871; /* Lyons Blue — body links, deep accent */ --rlv-daylily: #E9A900; /* Daylily — warm highlight */ --rlv-marmalade: #C16512; /* Marmalade — italic accent, rules */ --rlv-snapdragon: #FED877; /* Snapdragon — soft warm fill */ --rlv-custard: #F3E0BE; /* Vanilla Custard — editorial pause, sections */ /* ----- Neutrals (extension; not in the brand kit, derived for the system) -- */ --rlv-paper: #FAF8F3; /* off-white canvas, default surface */ --rlv-paper-warm: #F5F1E8; /* slightly warmer paper, alternating sections */ --rlv-ink: #1B1F23; /* near-black body text */ --rlv-ink-soft: #4A4F55; /* secondary text, supportive copy */ --rlv-ink-muted: #8B8F94; /* captions, metadata, disabled */ --rlv-rule: rgba(27, 31, 35, 0.12); /* hairline rules */ --rlv-rule-soft: rgba(27, 31, 35, 0.06); --rlv-white: #FFFFFF; /* Tinted overlays for hovering color over imagery */ --rlv-teal-08: rgba(0, 127, 123, 0.08); --rlv-lyons-08: rgba(1, 88, 113, 0.08); --rlv-marmalade-08:rgba(193, 101, 18, 0.08); /* ==================================================================== TYPOGRAPHY Display = Fraunces (variable serif, opsz + SOFT axes). Body = Poppins. No third face. Italic in display reserved for emphasis + Spanish. ==================================================================== */ --rlv-font-display: "Fraunces", "Obvia Narrow", "Bricolage Grotesque", Georgia, serif; --rlv-font-body: "Poppins", system-ui, sans-serif; /* Body sits at 17–18px / 1.7. Display leads with confidence at large sizes. */ --rlv-fs-display-xl: clamp(56px, 8vw, 110px); /* hero H1 */ --rlv-fs-display-lg: clamp(40px, 5.6vw, 72px); /* page H1, section opener */ --rlv-fs-display-md: clamp(30px, 4vw, 48px); /* H2 */ --rlv-fs-display-sm: 22px; /* H3 / subhead */ --rlv-fs-body-lg: 19px; /* lede */ --rlv-fs-body: 17px; /* default body */ --rlv-fs-body-sm: 15px; /* secondary body */ --rlv-fs-caption: 13px; /* captions */ --rlv-fs-eyebrow: 11px; /* small caps eyebrow */ --rlv-lh-display: 0.98; --rlv-lh-display-2: 1.05; --rlv-lh-body: 1.7; --rlv-lh-tight: 1.3; /* Letter-spacing: display tightens, eyebrows widen */ --rlv-tracking-display: -0.025em; --rlv-tracking-eyebrow: 0.20em; --rlv-tracking-caption: 0.04em; /* Display weights — H1 leads with weight (Bold), H2/H3 fall back to Light. */ --rlv-weight-display: 300; /* Light — H2, H3, body display moments */ --rlv-weight-display-h1: 400; /* Regular — hero H1 only */ --rlv-weight-display-book: 400; --rlv-weight-body-light: 300; --rlv-weight-body: 400; --rlv-weight-body-medium: 500; --rlv-weight-body-semi: 600; /* ==================================================================== SPACING — generous. Whitespace IS the design. ==================================================================== */ --rlv-space-1: 4px; --rlv-space-2: 8px; --rlv-space-3: 12px; --rlv-space-4: 16px; --rlv-space-5: 24px; --rlv-space-6: 32px; --rlv-space-7: 48px; --rlv-space-8: 64px; --rlv-space-9: 96px; --rlv-space-10: 128px; /* Section padding: generous vertical, responsive horizontal */ --rlv-section-y: clamp(72px, 9vw, 128px); --rlv-section-x: clamp(24px, 5vw, 80px); /* Container max widths */ --rlv-container: 1240px; --rlv-container-narrow: 720px; --rlv-container-prose: 640px; /* ==================================================================== RADII — restrained. Editorial design tends to flat / hairline edges. We allow a small radius for input/button comfort but never go larger. ==================================================================== */ --rlv-radius-0: 0; /* default: square. Most cards, sections. */ --rlv-radius-sm: 2px; /* inputs, pills */ --rlv-radius-md: 4px; /* buttons (subtle) */ --rlv-radius-pill: 999px; /* eyebrow chips, location pills */ /* ==================================================================== SHADOWS — a small, deliberate set. Most surfaces sit on hairlines; elevation only appears for floating elements (CTAs, cards, modals). Layered surfaces use the "plate + sheet" pattern: a soft warm-paper plate behind the white sheet carries the long shadow. ==================================================================== */ --rlv-shadow-pin: 0 1px 3px rgba(0, 0, 0, 0.15); --rlv-shadow-popup: 0 8px 24px rgba(27, 31, 35, 0.10); /* Inset highlight — the 1px white line at the top of any soft surface. */ --rlv-shadow-inset-hi: 0 1px 0 rgba(255, 255, 255, 0.7) inset; /* Pill (button) — short ambient shadow under a custard CTA. */ --rlv-shadow-pill: 0 1px 0 rgba(255, 255, 255, 0.55) inset, 0 1px 2px rgba(255, 255, 255, 0.3) inset, 0 8px 18px -10px rgba(27, 31, 35, 0.38); --rlv-shadow-pill-hover: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 14px 26px -10px rgba(27, 31, 35, 0.45); /* Floating card / layered surface */ --rlv-shadow-card: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 0 0 1px rgba(27, 31, 35, 0.05), 0 24px 56px -28px rgba(27, 31, 35, 0.25), 0 8px 18px -10px rgba(27, 31, 35, 0.10); --rlv-shadow-card-hover: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 0 0 1px rgba(27, 31, 35, 0.08), 0 36px 72px -32px rgba(27, 31, 35, 0.35), 0 12px 24px -12px rgba(27, 31, 35, 0.16); /* Inset field (input pill on warm paper) */ --rlv-shadow-input: 0 0 0 1px rgba(27, 31, 35, 0.06) inset, 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 6px 14px -10px rgba(27, 31, 35, 0.18); --rlv-shadow-input-focus: 0 0 0 1px rgba(193, 101, 18, 0.5) inset, 0 0 0 4px rgba(254, 216, 119, 0.45), 0 1px 0 rgba(255, 255, 255, 0.7) inset; /* ==================================================================== MOTION — short, calm. No bounce. ==================================================================== */ --rlv-ease: cubic-bezier(0.32, 0.08, 0.24, 1); --rlv-dur-fast: 140ms; --rlv-dur: 220ms; --rlv-dur-slow: 360ms; /* ==================================================================== LAYOUT — utility ==================================================================== */ --rlv-z-nav: 50; --rlv-z-overlay: 80; --rlv-z-modal: 90; } /* ============================================================================ Base resets and global type defaults — opt in by adding `class="rlv"` to a wrapper, or `data-rlv-root` on the body. Doesn't pollute documents that only need the tokens. ========================================================================= */ .rlv, [data-rlv-root] { font-family: var(--rlv-font-body); font-size: var(--rlv-fs-body); font-weight: var(--rlv-weight-body-light); line-height: var(--rlv-lh-body); color: var(--rlv-ink); background: var(--rlv-paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } .rlv *, .rlv *::before, .rlv *::after, [data-rlv-root] *, [data-rlv-root] *::before, [data-rlv-root] *::after { box-sizing: border-box; } /* Display utility */ .rlv-display { font-family: var(--rlv-font-display); font-weight: var(--rlv-weight-display); letter-spacing: var(--rlv-tracking-display); line-height: var(--rlv-lh-display-2); } .rlv-display em { font-style: italic; font-weight: inherit; } /* Italic accent rule. On light surfaces, italics flag in MARMALADE. On dark surfaces (Lyons, Ink), they flag in SNAPDRAGON. Apply .rlv-dark to a section to switch the convention. */ .rlv-display em { color: var(--rlv-marmalade); } .rlv-dark .rlv-display em, .rlv-dark em.rlv-accent { color: var(--rlv-snapdragon); } /* Old-style numerals — always-on for headings + figures. Use whenever displaying dates, years, counts, prices. */ .rlv-onum { font-feature-settings: "onum" 1; font-variant-numeric: oldstyle-nums; } /* Eyebrow / smallcaps utility — the section label. .rlv-eyebrow bare smallcaps .rlv-eyebrow.rlv-eyebrow--rule trailing horizontal rule (left-aligned) .rlv-eyebrow.rlv-eyebrow--brackets rules on both sides (centered) .rlv-eyebrow.rlv-eyebrow--accent marmalade variant for editorial breaks */ .rlv-eyebrow { font-family: var(--rlv-font-body); font-size: var(--rlv-fs-eyebrow); font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase; color: var(--rlv-ink-soft); display: inline-flex; align-items: center; gap: 14px; margin: 0; } .rlv-eyebrow--accent { color: var(--rlv-marmalade); } .rlv-dark .rlv-eyebrow--accent { color: var(--rlv-snapdragon); } .rlv-eyebrow--rule::after { content: ""; height: 1px; width: 56px; background: currentColor; opacity: 0.45; } .rlv-eyebrow--brackets::before, .rlv-eyebrow--brackets::after { content: ""; height: 1px; width: 32px; background: currentColor; opacity: 0.45; } /* Hairline rule */ .rlv-rule { border: none; border-top: 1px solid var(--rlv-rule); margin: 0; }